<template>
    <div class="main">
        <div class="main-left content">
            <el-carousel height="500px" arrow="none">
                <el-carousel-item >
                    <img src="@/assets/login/1.png" class="carousel-img">
                </el-carousel-item>
                <el-carousel-item >
                    <img src="@/assets/login/2.png" class="carousel-img">
                </el-carousel-item>
                <el-carousel-item >
                    <img src="@/assets/login/3.png" class="carousel-img">
                </el-carousel-item>
                <el-carousel-item >
                    <img src="@/assets/login/4.png" class="carousel-img">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="main-right content">
            <div style="height: 60px;">
                <img  style="height: 60px; margin-top: 15px;" src="@/assets/logo.png" alt="">
            </div>
            <el-form :model="loginForm" ref="loginForm" :inline="true" :rules="rules">
                <h2 class="head">欢迎使用在线教育考试</h2>
                <el-form-item prop="account" label="账 号：" class="frm">
                    <el-input class="ipt" v-model="loginForm.account" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密 码：" prop="password" class="frm">
                    <el-input class="ipt"  v-model="loginForm.password" placeholder="请输入密码" :show-password="true"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="login" style="width: 160px; height: 40px; margin-left: 50px; margin-top: 20px;" type="primary">登    录</el-button>
                </el-form-item>
            </el-form>
            <div style="margin-top: 60px;">
                <span style="font-size: 12px; margin-right: 25px;">
                    <router-link :to="{name:'Register'}">没有账号？前往注册</router-link>
                </span>
                <span style="font-size: 12px;margin-left: 150px;">
                    <router-link to="/login/retriveAccount">忘记密码</router-link>
                </span>
            </div>
        </div>
    </div>
</template>

<script>
import {login} from '@/api/user/user'
import { mapGetters } from 'vuex'
export default {
    name:'Login',
    data(){
        return{
            loginForm:{
                account:'',
                password:'',
                role:2
            },
            rules:{
                account: [{ required: true, trigger: 'blur', message: '请输入账号' }],
                password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
            }
        }
    },
    methods:{
        login(){
            this.$refs.loginForm.validate(valid => {
                if(valid){
                    login(this.loginForm).then(resp=>{
                        if(resp.code == 200){
                            console.log(resp.data);
                            this.$store.dispatch('user/setToken',resp.data.token);
                            this.$router.push('/index');
                        }else{
                            this.$message.error(resp.message);
                        }
                    }).catch(
                        error =>{
                            console.log('NO_MSG');
                        }
                    )
                }else{
                    this.$message.error('请将信息填写完整')
                }
            })
        },
    },
    mounted(){
    },
    computed:{
        ...mapGetters([
            'token',
        ])
    }
}
</script>

<style scoped>
    *{
        margin: 0px;
        padding: 0px;
        
    }
    a{
        text-decoration: none;
    }
    .ipt{
        width: 250px;
    }
    .frm{
        margin: 30px 0px 30px;
    }
    .head{
        text-align: center;
        font-family: '楷体';
        margin-top: 30px; 
        margin-bottom: 20px;
        color: rgb(60, 10, 100) 
    }
    .carousel-img{
        height: 500px;
    }
    .main{
        background: rgba(255, 252, 255, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70%;
        height: 500px;
        margin:40px auto;
        border: 1px solid whitesmoke;
        border-radius: 5px;
    }
    .main-left{
        width: 60%;
    }
    .main-right{
        width: 40%;
        height: 500px;
        /* background: rgba(153, 201, 82, 0.1); */
        background: rgba(238,231,202, 1);
    }
    .content{
        float: left;
    }
    .main:hover{
        transition: 1s linear;
        box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
    }
    a:hover{
        text-decoration: underline;
    }
    
</style>
